<template>
    <!--    <div style="width: 100%; margin-bottom: 30px" :style="{height: max_height +'px'}">-->
    <div style="width: 100%; margin-bottom: 30px; height: 100px;background-color: rgba(6, 30, 93, 0.5);">
        <div ref="chart" class="chart"></div>
    </div>
</template>

<script>


import {heightConfig3, set_option_progress_bar} from "@/utils/loadPage";
import debounce from 'lodash/debounce';
import * as echarts from 'echarts'


// 进度条
export default {
    name: "ProgressBar",
    data() {
        return {
            max_height: heightConfig3(),
            // 遮罩层
            loading: false,
            // 创建防抖函数
            debouncedSetOption: debounce(this.set_option, 50),
            cards: [],
            itemData: null,
            form: {
                title: '长者年龄性别人数分析',
                left_title: '已完成 60% | 300 个', // 左标题
                right_title: '未完成 40% | 200 个', // 右标题
                over_scale: 60, // 已完成百分比
                backgroundColor: 'rgba(6, 30, 93, 0.5)', // 背景颜色
                max: 300, // 最大值
                dataList: []
            },
        };
    },
    mounted() {
        // 组件销毁前移除窗口大小变化事件监听，销毁 ECharts 实例，并清除定时器和 sessionStorage
        this.handleResize();
        window.addEventListener('resize', this.handleResize);
        this.timer = setInterval(this.handleResize, 10000)

    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
        if (this.myChart) {
            this.myChart.dispose(); // 销毁 ECharts 实例
        }
        clearInterval(this.timer)
        sessionStorage.clear()
    },
    methods: {
        // 处理窗口大小变化事件
        handleResize() {
            console.log('Window resized');
            this.max_Height = heightConfig3();
            this.get_data();
            this.set_option();
        },

        set_option() {
            if (this.myChart) {
                this.myChart.dispose(); // 销毁 ECharts 实例
            }
            this.myChart = echarts.init(this.$refs.chart)
            console.log(this.form)
            let option = set_option_progress_bar(this, this.form)
            this.myChart.setOption(option)
        },

        /** 查询数据**/
        get_data() {
            this.form.dataList = [{
                value: 200,
            }];
        },
    }
};
</script>


<style scoped lang="scss">
.chart {
    width: 99%;
    height: 99%;
    overflow: hidden;
}
</style>
